<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>案例</title>
  <script src="../../dist/geng-ui.js"></script>
  <script>
    (async function () {
      document.title = '案例一：基于 canvas 实现'

      const tips = `
在canvas上 实现新增楼层（长方形），
然后在对应楼层里可以新增几个桌子（圆形），
桌子可以随意摆放，用户可以拖动桌子的位置，放大缩小，
最后数据保存在storage，刷新后还原回用户编辑状态。
`
      localStorage.getItem('data') || alert(tips)
      console.log(tips)

      const {createRender, createStore} = GengUI

      // 创建 CanvasRender 用于在 canvas 上生成元素
      const Render = await createRender('canvas')
      // 创建 store 用于数据持久化
      const store = await createStore('localstorage')

      // 分别为 Render 提供 scheme 和 data 用于生成 page
      // 参考了 阿里杨文坚老师的营销页面生成原理
      // https://github.com/FE-star/2022.08/blob/main/week1.pdf
      const render = new Render({
        el: '#canvas'
      }, [
        {
          top: 0,
          left: 0,
          width: 1000,
          height: 500,
          fill: 'green',
          type: 'rect',
          children: [
            {
              top: 50,
              left: 50,
              radius: 65,
              fill: '#039BE5',
              stroke: 'red',
              strokeWidth: 3,
              type: 'circle',
              children: [
                {
                  top: 25,
                  left: 25,
                  radius: 15,
                  fill: 'red',
                  strokeWidth: 3,
                  type: 'circle',
                },
                {
                  top: 25,
                  left: 70,
                  radius: 15,
                  fill: 'red',
                  strokeWidth: 3,
                  type: 'circle',
                },
              ]
            },
            {
              top: 150,
              left: 450,
              radius: 65,
              fill: '#039BE5',
              stroke: 'red',
              strokeWidth: 3,
              type: 'circle',
              children: [
                {
                  top: 25,
                  left: 25,
                  radius: 15,
                  fill: 'red',
                  strokeWidth: 3,
                  type: 'circle',
                },
                {
                  top: 25,
                  left: 70,
                  radius: 15,
                  fill: 'red',
                  strokeWidth: 3,
                  type: 'circle',
                },
              ]
            }
          ]
        }
      ])

      render.use(store).render()
    })()

  </script>
</head>
<body>
<div id="app">
  <div class="container">
    <canvas id="canvas" width="1000" height="500" style="border: 1px solid red;"></canvas>
  </div>
</div>
</body>
</html>

